<!-- d3内容组件 -->
<template>
	<div class="d3_content" style="display: flex; position: relative">
		<div class="svg_wrap" style="flex: 1"></div>
	</div>
</template>
<script setup>
import * as d3 from "d3";
import { computed, onMounted, ref, watch, watchEffect } from "vue";

import { RelationshipGraph } from "./RelationshipGraph.js";

// const props = defineProps(["data", "config"]);
let nodes = ref([]);
let links = ref([]);
let config = ref({
	//配置
	control: false, //控件是否显示
	isCollapse: false,
	nameDisplay: true, //控制关联文字显隐
	colors: {
		0: {
			fontColor: "#FFC0CB",
			bgColor: [
				{ color: "#0D3175", opacity: "1", stop: "0%" },
				{ color: "#0D3175", opacity: ".9", stop: "55%" },
				{ color: "#20B1FF", opacity: "0.8", stop: "100%" }
			],
			borderColor: "#00EAFF"
		},
		1: {
			fontColor: "#FFFFFF",
			bgColor: [
				{ color: "#F66F04", opacity: "1", stop: "0%" },
				{ color: "#F66F04", opacity: ".9", stop: "55%" },
				{ color: "#D39F00", opacity: "0.8", stop: "100%" }
			],
			borderColor: "#00EAFF"
		},
		2: {
			fontColor: "#55cccc",
			bgColor: [
				{ color: "#F66F04", opacity: "0.5", stop: "0%" },
				{ color: "#F66F04", opacity: "0.5", stop: "55%" },
				{ color: "#D39F00", opacity: "0.7", stop: "100%" }
			]
		},
		3: {
			fontColor: "#aaaaff",
			bgColor: [
				{ color: "#F66F04", opacity: "0.5", stop: "0%" },
				{ color: "#F66F04", opacity: "0.5", stop: "55%" },
				{ color: "#D39F00", opacity: "0.7", stop: "100%" }
			]
		},
		4: {
			fontColor: "#ca635f",
			bgColor: [
				{ color: "#F66F04", opacity: "0.5", stop: "0%" },
				{ color: "#F66F04", opacity: "0.5", stop: "55%" },
				{ color: "#D39F00", opacity: "0.7", stop: "100%" }
			]
		},
		5: {
			fontColor: "#BA55D3",
			bgColor: [
				{ color: "#F66F04", opacity: "0.5", stop: "0%" },
				{ color: "#F66F04", opacity: "0.5", stop: "55%" },
				{ color: "#D39F00", opacity: "0.7", stop: "100%" }
			]
		}
	},
	nodeSize: 60, //node节点大小
	nameLineDisplay: true, //节点之间的关系内容是否默认显示

	node_category: [
		{ value: true, label: "隐患项", color: "#7FFFD4" },
		{ value: true, label: "相关案例", color: "#4e88af" }
	] //分类------(根据自己接口返回的数据进行调整)
});
let instance = ref(null);
// const value = computed({
// 	get: () =>
// 		props.form[props.config.prop] || props.form[props.config.prop] == "0"
// 			? Number(props.form[props.config.prop])
// 			: undefined,
// 	set: (val) => (props.form[props.config.prop] = val + "")
// });

// watchEffect((value) => {
// 	instance = new RelationshipGraph(props.data, props.config);
// 	instance.updateDataApiFn = updateData;
// });

onMounted(async () => {
	let data = await loadGraphData();
	instance = new RelationshipGraph(data, config.value);
	instance.updateDataApiFn = updateData;
});

//获取数据---在这儿调用接口获取后台数据
const loadGraphData = async (newValue) => {
	let obj = {
		rootId: "1",
		nodes: [
			{ name: "1", id: "1", expand: true, expanded: true },
			{ name: "2", id: "2", expand: true },
			{ name: "3", id: "3", expand: true },
			{ name: "8", id: "8", expand: true },
			{ name: "89", id: "89", expand: true },
			{ name: "88", id: "88", expand: true },
			{ name: "87", id: "87", expand: true },
			{ name: "86", id: "86", expand: true },
			{ name: "85", id: "85", expand: true },
			{ name: "84", id: "84", expand: true },
			{ name: "83", id: "83", expand: true },
			{ name: "82", id: "82", expand: true },
			{ name: "81", id: "81", expand: true }
		],
		links: [
			{
				source: "1",
				target: "2",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "3",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "8",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "81",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "82",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "83",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "84",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "85",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "86",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "87",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "88",
				relation: "图谱关系"
			},
			{
				source: "1",
				target: "89",
				relation: "图谱关系"
			}
		]
	};
	return obj;
};
//更新数据---
const updateData = (data) => {
	try {
		let obj;
		if (data.id == 3) {
			obj = {
				nodes: [{ name: "4", id: "4", expand: true, level: 4 }],
				links: [
					{
						source: "3",
						target: "4"
					}
				]
			};
		} else if (data.id == 4) {
			obj = {
				nodes: [{ name: "5", id: "5", level: 3 }],
				links: [
					{
						source: "4",
						target: "5"
					}
				]
			};
		} else if (data.id == 2) {
			obj = {
				nodes: [{ name: "6", id: "6", expand: true, level: 2 }],
				links: [
					{
						source: "2",
						target: "6"
					}
				]
			};
		} else if (data.id == 6) {
			obj = {
				nodes: [{ name: "7", id: "7", level: 3 }],
				links: [
					{
						source: "6",
						target: "7"
					}
				]
			};
		} else if (data.id == 8) {
			obj = {
				nodes: [{ name: "9", id: "9", expand: true, level: 2 }],
				links: [
					{
						source: "8",
						target: "9"
					}
				]
			};
		} else if (data.id == 9) {
			obj = {
				nodes: [{ name: "10", id: "10", expand: true, level: 3 }],
				links: [
					{
						source: "9",
						target: "10"
					}
				]
			};
		} else {
			obj = {
				nodes: [],
				links: []
			};
		}
		return obj;
	} catch (error) {
		console.log("err-----错误", error);
	}
};
</script>

<style lang="less">
// node节点样式
.svg_wrap {
	svg {
		margin: 0 !important;
	}
	user-select: none;
}

// node 包裹
.node_wrap {
	circle {
		border: 10px #ff6a6a solid;
	}
	//失效
	&.disactived {
		circle {
		}
	}
	&.actived {
		circle {
			stroke: #ffc0cb;
			stroke-width: 14px;
			stroke-opacity: 0.15 + 0.3;
			//fill: red;
			border: 10px #ff6a6a solid;
		}
	}
}

//线条 包裹
.lineText_wrap {
	&.actived {
		//线条
		.line_wrap {
			// //线条
			// line {
			// 	stroke: #ffc0cb;
			// 	stroke-width: 14px;
			// 	stroke-opacity: 0.15 + 0.3;
			// 	background: red;
			// 	border: 10px #ff6a6a solid;
			// }
			//文本
			text {
				&.actived {
					stroke: #ffc0cb;
					stroke-width: 14px;
					stroke-opacity: 0.15 + 0.3;
					background: red;
					border: 10px #ff6a6a solid;
				}
			}
		}
	}
}

.node_wrap.disactived,
.lineText_wrap.disactived {
	opacity: 0.1;
}

/**控件样式 */
.d3_content {
	height: 100%;
	background: #000;
	.el-collapse-item__wrap,
	.el-collapse-item__header {
		background: transparent;
		overflow: unset;
	}

	display: flex;
	// 控制wrap
	.d3_control {
		transition: 0.2s;
		width: 240px;
		height: 686px;
		overflow: auto;
		box-shadow: 1px 10px 10px #aaa;
		.control_auto {
			width: 100%;
			.control_wrap {
				width: 200px;
				padding: 20px 10px 20px 20px;
				margin-right: 10px;

				.control_item {
					margin-bottom: 40px;
				}
				.d3_text {
					h3 {
						line-height: 50px;
					}
				}
			}
		}
		&.collapse {
			width: 0px;
		}
	}

	.svg_wrap {
		flex: 1;
	}
}
</style>
